﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>监听器</title>
	</head>
	<body>
		<div id = "app">
		   千米 : <input type = "text" v-model="kilometers">
		   米 : <input type = "text" v-model="meters">
		</div>
		<p id="info"></p>
	
		<script src="vue.js"></script>
		<script>
			var vm = new Vue({
		    el: '#app',
		    data: {
		      kilometers: 0,
		      meters: 0
		    },
		    watch : {
	        kilometers: function(val){
	          this.meters = val * 1000
	        },
	        // 监听器函数也可以接受两个参数，val是当前值，oldVal是改变之前的值
	        meters : function (val, oldVal) {
	          this.kilometers = val / 1000;
	        }
		    }
		    });
		    /*
		    // $watch 是一个实例方法
		    vm.$watch('kilometers', function (newValue, oldValue) {
		    	// 这个回调将在 vm.kilometers 改变后调用
		    	document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
				})*/
		</script>
	</body>
</html>